
var title, todolist, donelist, todocount, donecount, prev;
var list = {
  todolist: [],
  donelist: []
};
init();
function init() {
  title = document.querySelector("#title");
  todolist = document.querySelector("#todolist");
  donelist = document.querySelector("#donelist");
  todocount = document.querySelector("#todocount");
  donecount = document.querySelector("#donecount");
  // 输入文本内容后，敲回车
  document.addEventListener("keyup", keyHandler);
  //修改在那个列表中
  todolist.addEventListener("change", changeHandler);
  //删除元素
  todolist.addEventListener("click", clickHandler);
  //修改显示input
  todolist.addEventListener("dblclick", dblclickHandler);
  //input失焦处理
  todolist.addEventListener("focusout", blurHandler);
  //修改在那个列表中
  donelist.addEventListener("change", changeHandler);
  //删除元素
  donelist.addEventListener("click", clickHandler);

  // 初始化渲染（长期保存）
  if (localStorage.list) {
    // 将localStorage.list转换为对象并覆盖原来的list
    list = JSON.parse(localStorage.list);
    render();
  }
}

function keyHandler(e) {
  // title.value.trim().length===0 输入框内容为空
  // 如果按下的键不是Enter，或者输入框内容为空时，跳出
  if (e.keyCode !== 13 || title.value.trim().length === 0 ) return;
  // 将输入框中的内容放入todolist
  list.todolist.push(title.value);
  // 将输入框清空
  title.value = "";
  // 渲染
  render();
}

// 失焦
function blurHandler(e) {

  var index = Array.from(todolist.children).indexOf(
    // e.target-->input
    // e.target.parentElement.parentElement-->li
    e.target.parentElement.parentElement
  );
  list.todolist[index] = e.target.value;
  render();
}

// 点击多选框切换列表
function changeHandler(e) {
  if (e.target.type !== "checkbox") return;
  switchList(e.target, e.target.checked);
}

// 双击
function dblclickHandler(e) {
  if (e.target.nodeName !== "P") return;
  // input赋值为新的显示的输入框
  var input = e.target.firstElementChild;
  if (prev) {
    prev.style.display = "none";
  }
  prev = input;
  // 双击的输入框显示，其它的隐藏
  input.style.display = "block";
  // 让输入框里的内容为双击的文本内容
  input.value = e.target.textContent;
  //选中文本框内的字符串
  input.setSelectionRange(0, input.value.length);
  //聚焦
  input.focus();
}

// 切换列表
function switchList(target, bool, remove) {
  var arr = bool ? list.todolist : list.donelist;
  var arr1 = bool ? list.donelist : list.todolist;
  // 如果remove没有给值，target-->checkbox,elem为p标签，删除并添加给另一个列表
  // 如果remove有值，target-->a,elem为p标签，只删除，不添加
  var elem =
    remove === undefined
      ? target.nextElementSibling
      : target.previousElementSibling;
  var index = arr.indexOf(elem.textContent);
  // 从下标index开始删除1个元素，并且返回这个被删除的元素组成的新数组
  var del = arr.splice(index, 1);
  if (remove === undefined) arr1.push(del[0]);
  // 根据这个列表重新渲染todolist和donelist
  render();
}

// 点击超链接，删除一行
function clickHandler(e) {
  // 如果点击的节点名字不是超链接，跳出
  if (e.target.nodeName !== "A") return;
  switchList(
    e.target,
    !e.target.parentElement.firstElementChild.checked,
    true
  );
}

function render() {
  // 把当前数据存到本地存储里面
  localStorage.list = JSON.stringify(list);
  // 遍历list
  // list是一个对象，包含todolist和donelist
  // 这两个key正好和ol以及ul的id是相同的
  // 通过window[prop]可以获取到ol和ul
  for (var prop in list) {
    // 将li遍历存到ol和ul里面
    // innerHTML:获取HTML当前标签的起始和结束里面的内容
    window[prop].innerHTML = list[prop].reduce((value, item) => {
      return (
        value +
        `
                    <li>
                        <input type="checkbox" ${prop === "donelist" ? "checked" : ""
        }>
                        <p>${item}<input type="text" style="display:none"></p>
                        <a href="javascript:void(0)">-</a>     
                     </li>
                    `
      );
    }, "");
  }
  // 存储列表的数量
  todocount.textContent = list.todolist.length;
  donecount.textContent = list.donelist.length;
}
